<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>CSS3代码实现的tab标签切换</title>

<style>
	*{padding:0px;margin:0px;}
	#tab{margin:20px;20px;position:relative;}
	ul{list-style:none;}
	ul li{float:left;}
	ul li a{background:#f90;
			color:#fff;
			font-weight:500;
			height:30px;
			line-height:30px;
			border-bottom:0px;
			display:block;
			text-decoration:none;
			padding:0px 10px;
			margin-right:1px;		  
	}
	/* ul li a:hover{background:blue;} */
	ul li a:visited{background:blue;}
	#div1{clear:left;}
	#tab>div{
			border:1px solid blue;
			width:170px;
			height:100px;
			text-indent:2em;
			padding:5px 5px;
			position:absolute;
			top:31px;
			background:#fff;
			}
	#div1:target,#div2:target,#div3:target{z-index:2;}
</style>

</head>
<body>
	
	<div id=tab>
		<ul>
			<li><a href="#div1">标签1</a></li>
			<li><a href="#div2">标签2</a></li>
			<li><a href="#div3">标签3</a></li>
		</ul>
			<div id="div1">1欢迎来到北京，这是标签1的内容，这里是清华大学信息处理技术国家实验室（筹）</div>
			<div id="div2">2欢迎来到杭州，这是标签2的内容，这里是浙江大学计算机图形学国家重点实验室</div>
			<div id="div3">3欢迎来到武汉，这是标签3的内容，这里是华中科技大学脉冲强磁场国家重大科技基础设施</div>
	</div>

</body>
</html>